<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2492232" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon yz-portal">&#xe62a;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe61c;</span>
                <div class="name">iconfont-link</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe602;</span>
                <div class="name">iconfont-31leimu</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe603;</span>
                <div class="name">iconfont-31saoma</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe612;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe613;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe614;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe615;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe61d;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe623;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe60c;</span>
                <div class="name">iconfont-erweima</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe617;</span>
                <div class="name">iconfont-laba</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe61a;</span>
                <div class="name">iconfont-unie122</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe624;</span>
                <div class="name">iconfont-iconqq</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe627;</span>
                <div class="name">iconfont-iconfontshuaxin (1)</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe630;</span>
                <div class="name">iconfont-wifi</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe63b;</span>
                <div class="name">iconfont-saomaio</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe61e;</span>
                <div class="name">iconfont-iconfonticons</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe604;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe657;</span>
                <div class="name">iconfont-tupic</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe605;</span>
                <div class="name">取消</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe648;</span>
                <div class="name">行政</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe666;</span>
                <div class="name">认证</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe788;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xf0f0;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xf0f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe637;</span>
                <div class="name">下载 (1)</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe68c;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe626;</span>
                <div class="name">钉住</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe671;</span>
                <div class="name">阅读量</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe705;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe610;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6dd;</span>
                <div class="name">accessory</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6de;</span>
                <div class="name">activity</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6df;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e0;</span>
                <div class="name">addition_fill</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e1;</span>
                <div class="name">addition</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e2;</span>
                <div class="name">addpeople_fill</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e3;</span>
                <div class="name">addpeople</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e4;</span>
                <div class="name">addressbook_fill</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e5;</span>
                <div class="name">addressbook</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e6;</span>
                <div class="name">barrage</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e7;</span>
                <div class="name">browse</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e8;</span>
                <div class="name">brush</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6e9;</span>
                <div class="name">businesscard</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6ea;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6eb;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6ec;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6ed;</span>
                <div class="name">collection_fill</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6ee;</span>
                <div class="name">collection</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6ef;</span>
                <div class="name">computer</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f0;</span>
                <div class="name">coordinates</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f1;</span>
                <div class="name">coupons</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f2;</span>
                <div class="name">createtask</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f3;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f4;</span>
                <div class="name">document</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f5;</span>
                <div class="name">dynamic</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f6;</span>
                <div class="name">editor</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f7;</span>
                <div class="name">eit</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f8;</span>
                <div class="name">emoji</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6f9;</span>
                <div class="name">empty</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6fa;</span>
                <div class="name">enter</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6fb;</span>
                <div class="name">enterinto</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6fc;</span>
                <div class="name">feedback</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6fd;</span>
                <div class="name">flag_fill</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6fe;</span>
                <div class="name">flag</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe6ff;</span>
                <div class="name">flashlight</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe700;</span>
                <div class="name">fullscreen</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe701;</span>
                <div class="name">group</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe702;</span>
                <div class="name">homepage</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe703;</span>
                <div class="name">integral</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe704;</span>
                <div class="name">interactive</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe706;</span>
                <div class="name">label</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe707;</span>
                <div class="name">like_fill</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe708;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe709;</span>
                <div class="name">live</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe70a;</span>
                <div class="name">lock_fill</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe70b;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe70c;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe70d;</span>
                <div class="name">manage</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe70e;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe70f;</span>
                <div class="name">mobilephone</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe710;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe711;</span>
                <div class="name">narrow</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe712;</span>
                <div class="name">offline</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe714;</span>
                <div class="name">other</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe715;</span>
                <div class="name">people</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe716;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe717;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe719;</span>
                <div class="name">playon</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe71a;</span>
                <div class="name">praise</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe71b;</span>
                <div class="name">prompt</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe71e;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe71f;</span>
                <div class="name">remind</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe720;</span>
                <div class="name">return</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe721;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe726;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe727;</span>
                <div class="name">service</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe728;</span>
                <div class="name">setup</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe729;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe72d;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe72e;</span>
                <div class="name">switch</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe731;</span>
                <div class="name">tailor</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe732;</span>
                <div class="name">task</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe733;</span>
                <div class="name">tasklist</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe734;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe735;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe738;</span>
                <div class="name">trash</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe739;</span>
                <div class="name">undo</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe73a;</span>
                <div class="name">unlock_fill</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe73b;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe73d;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe741;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe749;</span>
                <div class="name">packup</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe74a;</span>
                <div class="name">unfold</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe7a7;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe7a8;</span>
                <div class="name">JPG</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe7a9;</span>
                <div class="name">DOCX</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon yz-portal">&#xe7ab;</span>
                <div class="name">MP4</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'yz-portal';
  src: url('iconfont.woff2?t=1714490208005') format('woff2'),
       url('iconfont.woff?t=1714490208005') format('woff'),
       url('iconfont.ttf?t=1714490208005') format('truetype'),
       url('iconfont.svg?t=1714490208005#yz-portal') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.yz-portal {
  font-family: "yz-portal" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="yz-portal"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"yz-portal" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon yz-portal icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfontlink"></span>
            <div class="name">
              iconfont-link
            </div>
            <div class="code-name">.icon-iconfontlink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfont31leimu"></span>
            <div class="name">
              iconfont-31leimu
            </div>
            <div class="code-name">.icon-iconfont31leimu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfont31saoma"></span>
            <div class="name">
              iconfont-31saoma
            </div>
            <div class="code-name">.icon-iconfont31saoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticon2"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-iconfonticon2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticon3"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-iconfonticon3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticon4"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.icon-iconfonticon4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticon5"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-iconfonticon5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfontdizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-iconfontdizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfontmima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-iconfontmima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonterweima"></span>
            <div class="name">
              iconfont-erweima
            </div>
            <div class="code-name">.icon-iconfonterweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfontlaba"></span>
            <div class="name">
              iconfont-laba
            </div>
            <div class="code-name">.icon-iconfontlaba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfontunie122"></span>
            <div class="name">
              iconfont-unie122
            </div>
            <div class="code-name">.icon-iconfontunie122
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticonqq"></span>
            <div class="name">
              iconfont-iconqq
            </div>
            <div class="code-name">.icon-iconfonticonqq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticonfontshuaxin1"></span>
            <div class="name">
              iconfont-iconfontshuaxin (1)
            </div>
            <div class="code-name">.icon-iconfonticonfontshuaxin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfontwifi"></span>
            <div class="name">
              iconfont-wifi
            </div>
            <div class="code-name">.icon-iconfontwifi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfont"></span>
            <div class="name">
              iconfont-saomaio
            </div>
            <div class="code-name">.icon-iconfont
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticonfonticons"></span>
            <div class="name">
              iconfont-iconfonticons
            </div>
            <div class="code-name">.icon-iconfonticonfonticons
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonticonfontdianpu5"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-iconfonticonfontdianpu5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-iconfonttupic"></span>
            <div class="name">
              iconfont-tupic
            </div>
            <div class="code-name">.icon-iconfonttupic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-quxiao"></span>
            <div class="name">
              取消
            </div>
            <div class="code-name">.icon-quxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-hangzheng"></span>
            <div class="name">
              行政
            </div>
            <div class="code-name">.icon-hangzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-authenticate"></span>
            <div class="name">
              认证
            </div>
            <div class="code-name">.icon-authenticate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-icon--"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-icon--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-xiazai1"></span>
            <div class="name">
              下载 (1)
            </div>
            <div class="code-name">.icon-xiazai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-dingzhu"></span>
            <div class="name">
              钉住
            </div>
            <div class="code-name">.icon-dingzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-yueduliang"></span>
            <div class="name">
              阅读量
            </div>
            <div class="code-name">.icon-yueduliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-QQ"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-QQ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-accessory"></span>
            <div class="name">
              accessory
            </div>
            <div class="code-name">.icon-accessory
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-activity"></span>
            <div class="name">
              activity
            </div>
            <div class="code-name">.icon-activity
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-addition_fill"></span>
            <div class="name">
              addition_fill
            </div>
            <div class="code-name">.icon-addition_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-addition"></span>
            <div class="name">
              addition
            </div>
            <div class="code-name">.icon-addition
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-addpeople_fill"></span>
            <div class="name">
              addpeople_fill
            </div>
            <div class="code-name">.icon-addpeople_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-addpeople"></span>
            <div class="name">
              addpeople
            </div>
            <div class="code-name">.icon-addpeople
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-addressbook_fill"></span>
            <div class="name">
              addressbook_fill
            </div>
            <div class="code-name">.icon-addressbook_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-addressbook"></span>
            <div class="name">
              addressbook
            </div>
            <div class="code-name">.icon-addressbook
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-barrage"></span>
            <div class="name">
              barrage
            </div>
            <div class="code-name">.icon-barrage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-browse"></span>
            <div class="name">
              browse
            </div>
            <div class="code-name">.icon-browse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-brush"></span>
            <div class="name">
              brush
            </div>
            <div class="code-name">.icon-brush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-businesscard"></span>
            <div class="name">
              businesscard
            </div>
            <div class="code-name">.icon-businesscard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-collection_fill"></span>
            <div class="name">
              collection_fill
            </div>
            <div class="code-name">.icon-collection_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-collection"></span>
            <div class="name">
              collection
            </div>
            <div class="code-name">.icon-collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-computer"></span>
            <div class="name">
              computer
            </div>
            <div class="code-name">.icon-computer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-coordinates"></span>
            <div class="name">
              coordinates
            </div>
            <div class="code-name">.icon-coordinates
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-coupons"></span>
            <div class="name">
              coupons
            </div>
            <div class="code-name">.icon-coupons
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-createtask"></span>
            <div class="name">
              createtask
            </div>
            <div class="code-name">.icon-createtask
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-document"></span>
            <div class="name">
              document
            </div>
            <div class="code-name">.icon-document
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-dynamic"></span>
            <div class="name">
              dynamic
            </div>
            <div class="code-name">.icon-dynamic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-editor"></span>
            <div class="name">
              editor
            </div>
            <div class="code-name">.icon-editor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-eit"></span>
            <div class="name">
              eit
            </div>
            <div class="code-name">.icon-eit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-emoji"></span>
            <div class="name">
              emoji
            </div>
            <div class="code-name">.icon-emoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-empty"></span>
            <div class="name">
              empty
            </div>
            <div class="code-name">.icon-empty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-enter"></span>
            <div class="name">
              enter
            </div>
            <div class="code-name">.icon-enter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-enterinto"></span>
            <div class="name">
              enterinto
            </div>
            <div class="code-name">.icon-enterinto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-feedback"></span>
            <div class="name">
              feedback
            </div>
            <div class="code-name">.icon-feedback
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-flag_fill"></span>
            <div class="name">
              flag_fill
            </div>
            <div class="code-name">.icon-flag_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-flag"></span>
            <div class="name">
              flag
            </div>
            <div class="code-name">.icon-flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-flashlight"></span>
            <div class="name">
              flashlight
            </div>
            <div class="code-name">.icon-flashlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-fullscreen"></span>
            <div class="name">
              fullscreen
            </div>
            <div class="code-name">.icon-fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-group"></span>
            <div class="name">
              group
            </div>
            <div class="code-name">.icon-group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-homepage"></span>
            <div class="name">
              homepage
            </div>
            <div class="code-name">.icon-homepage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-integral"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.icon-integral
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-interactive"></span>
            <div class="name">
              interactive
            </div>
            <div class="code-name">.icon-interactive
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-label"></span>
            <div class="name">
              label
            </div>
            <div class="code-name">.icon-label
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-like_fill"></span>
            <div class="name">
              like_fill
            </div>
            <div class="code-name">.icon-like_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-live"></span>
            <div class="name">
              live
            </div>
            <div class="code-name">.icon-live
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-lock_fill"></span>
            <div class="name">
              lock_fill
            </div>
            <div class="code-name">.icon-lock_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-manage"></span>
            <div class="name">
              manage
            </div>
            <div class="code-name">.icon-manage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-mobilephone"></span>
            <div class="name">
              mobilephone
            </div>
            <div class="code-name">.icon-mobilephone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-narrow"></span>
            <div class="name">
              narrow
            </div>
            <div class="code-name">.icon-narrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-offline"></span>
            <div class="name">
              offline
            </div>
            <div class="code-name">.icon-offline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-other"></span>
            <div class="name">
              other
            </div>
            <div class="code-name">.icon-other
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-people"></span>
            <div class="name">
              people
            </div>
            <div class="code-name">.icon-people
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-playon"></span>
            <div class="name">
              playon
            </div>
            <div class="code-name">.icon-playon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-praise"></span>
            <div class="name">
              praise
            </div>
            <div class="code-name">.icon-praise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-prompt"></span>
            <div class="name">
              prompt
            </div>
            <div class="code-name">.icon-prompt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-remind"></span>
            <div class="name">
              remind
            </div>
            <div class="code-name">.icon-remind
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-return"></span>
            <div class="name">
              return
            </div>
            <div class="code-name">.icon-return
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.icon-send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-service"></span>
            <div class="name">
              service
            </div>
            <div class="code-name">.icon-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-setup"></span>
            <div class="name">
              setup
            </div>
            <div class="code-name">.icon-setup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.icon-success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-switch"></span>
            <div class="name">
              switch
            </div>
            <div class="code-name">.icon-switch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-tailor"></span>
            <div class="name">
              tailor
            </div>
            <div class="code-name">.icon-tailor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-task"></span>
            <div class="name">
              task
            </div>
            <div class="code-name">.icon-task
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-tasklist"></span>
            <div class="name">
              tasklist
            </div>
            <div class="code-name">.icon-tasklist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.icon-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-trash"></span>
            <div class="name">
              trash
            </div>
            <div class="code-name">.icon-trash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-undo"></span>
            <div class="name">
              undo
            </div>
            <div class="code-name">.icon-undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-unlock_fill"></span>
            <div class="name">
              unlock_fill
            </div>
            <div class="code-name">.icon-unlock_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-packup"></span>
            <div class="name">
              packup
            </div>
            <div class="code-name">.icon-packup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-unfold"></span>
            <div class="name">
              unfold
            </div>
            <div class="code-name">.icon-unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-wenjianjia"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-wenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-JPG"></span>
            <div class="name">
              JPG
            </div>
            <div class="code-name">.icon-JPG
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-DOCX"></span>
            <div class="name">
              DOCX
            </div>
            <div class="code-name">.icon-DOCX
            </div>
          </li>
          
          <li class="dib">
            <span class="icon yz-portal icon-MP4"></span>
            <div class="name">
              MP4
            </div>
            <div class="code-name">.icon-MP4
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="yz-portal icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            yz-portal" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontlink"></use>
                </svg>
                <div class="name">iconfont-link</div>
                <div class="code-name">#icon-iconfontlink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfont31leimu"></use>
                </svg>
                <div class="name">iconfont-31leimu</div>
                <div class="code-name">#icon-iconfont31leimu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfont31saoma"></use>
                </svg>
                <div class="name">iconfont-31saoma</div>
                <div class="code-name">#icon-iconfont31saoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticon2"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-iconfonticon2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticon3"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-iconfonticon3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticon4"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#icon-iconfonticon4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticon5"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-iconfonticon5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontdizhi"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-iconfontdizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontmima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-iconfontmima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonterweima"></use>
                </svg>
                <div class="name">iconfont-erweima</div>
                <div class="code-name">#icon-iconfonterweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontlaba"></use>
                </svg>
                <div class="name">iconfont-laba</div>
                <div class="code-name">#icon-iconfontlaba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontunie122"></use>
                </svg>
                <div class="name">iconfont-unie122</div>
                <div class="code-name">#icon-iconfontunie122</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticonqq"></use>
                </svg>
                <div class="name">iconfont-iconqq</div>
                <div class="code-name">#icon-iconfonticonqq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticonfontshuaxin1"></use>
                </svg>
                <div class="name">iconfont-iconfontshuaxin (1)</div>
                <div class="code-name">#icon-iconfonticonfontshuaxin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontwifi"></use>
                </svg>
                <div class="name">iconfont-wifi</div>
                <div class="code-name">#icon-iconfontwifi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfont"></use>
                </svg>
                <div class="name">iconfont-saomaio</div>
                <div class="code-name">#icon-iconfont</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticonfonticons"></use>
                </svg>
                <div class="name">iconfont-iconfonticons</div>
                <div class="code-name">#icon-iconfonticonfonticons</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonticonfontdianpu5"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-iconfonticonfontdianpu5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfonttupic"></use>
                </svg>
                <div class="name">iconfont-tupic</div>
                <div class="code-name">#icon-iconfonttupic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiao"></use>
                </svg>
                <div class="name">取消</div>
                <div class="code-name">#icon-quxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hangzheng"></use>
                </svg>
                <div class="name">行政</div>
                <div class="code-name">#icon-hangzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-authenticate"></use>
                </svg>
                <div class="name">认证</div>
                <div class="code-name">#icon-authenticate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon--"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-icon--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai1"></use>
                </svg>
                <div class="name">下载 (1)</div>
                <div class="code-name">#icon-xiazai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingzhu"></use>
                </svg>
                <div class="name">钉住</div>
                <div class="code-name">#icon-dingzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yueduliang"></use>
                </svg>
                <div class="name">阅读量</div>
                <div class="code-name">#icon-yueduliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-QQ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-accessory"></use>
                </svg>
                <div class="name">accessory</div>
                <div class="code-name">#icon-accessory</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-activity"></use>
                </svg>
                <div class="name">activity</div>
                <div class="code-name">#icon-activity</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addition_fill"></use>
                </svg>
                <div class="name">addition_fill</div>
                <div class="code-name">#icon-addition_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addition"></use>
                </svg>
                <div class="name">addition</div>
                <div class="code-name">#icon-addition</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addpeople_fill"></use>
                </svg>
                <div class="name">addpeople_fill</div>
                <div class="code-name">#icon-addpeople_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addpeople"></use>
                </svg>
                <div class="name">addpeople</div>
                <div class="code-name">#icon-addpeople</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addressbook_fill"></use>
                </svg>
                <div class="name">addressbook_fill</div>
                <div class="code-name">#icon-addressbook_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addressbook"></use>
                </svg>
                <div class="name">addressbook</div>
                <div class="code-name">#icon-addressbook</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-barrage"></use>
                </svg>
                <div class="name">barrage</div>
                <div class="code-name">#icon-barrage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-browse"></use>
                </svg>
                <div class="name">browse</div>
                <div class="code-name">#icon-browse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush"></use>
                </svg>
                <div class="name">brush</div>
                <div class="code-name">#icon-brush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-businesscard"></use>
                </svg>
                <div class="name">businesscard</div>
                <div class="code-name">#icon-businesscard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collection_fill"></use>
                </svg>
                <div class="name">collection_fill</div>
                <div class="code-name">#icon-collection_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collection"></use>
                </svg>
                <div class="name">collection</div>
                <div class="code-name">#icon-collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-computer"></use>
                </svg>
                <div class="name">computer</div>
                <div class="code-name">#icon-computer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coordinates"></use>
                </svg>
                <div class="name">coordinates</div>
                <div class="code-name">#icon-coordinates</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coupons"></use>
                </svg>
                <div class="name">coupons</div>
                <div class="code-name">#icon-coupons</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-createtask"></use>
                </svg>
                <div class="name">createtask</div>
                <div class="code-name">#icon-createtask</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document"></use>
                </svg>
                <div class="name">document</div>
                <div class="code-name">#icon-document</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dynamic"></use>
                </svg>
                <div class="name">dynamic</div>
                <div class="code-name">#icon-dynamic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor"></use>
                </svg>
                <div class="name">editor</div>
                <div class="code-name">#icon-editor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eit"></use>
                </svg>
                <div class="name">eit</div>
                <div class="code-name">#icon-eit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emoji"></use>
                </svg>
                <div class="name">emoji</div>
                <div class="code-name">#icon-emoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-empty"></use>
                </svg>
                <div class="name">empty</div>
                <div class="code-name">#icon-empty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-enter"></use>
                </svg>
                <div class="name">enter</div>
                <div class="code-name">#icon-enter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-enterinto"></use>
                </svg>
                <div class="name">enterinto</div>
                <div class="code-name">#icon-enterinto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feedback"></use>
                </svg>
                <div class="name">feedback</div>
                <div class="code-name">#icon-feedback</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flag_fill"></use>
                </svg>
                <div class="name">flag_fill</div>
                <div class="code-name">#icon-flag_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flag"></use>
                </svg>
                <div class="name">flag</div>
                <div class="code-name">#icon-flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flashlight"></use>
                </svg>
                <div class="name">flashlight</div>
                <div class="code-name">#icon-flashlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fullscreen"></use>
                </svg>
                <div class="name">fullscreen</div>
                <div class="code-name">#icon-fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-group"></use>
                </svg>
                <div class="name">group</div>
                <div class="code-name">#icon-group</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-homepage"></use>
                </svg>
                <div class="name">homepage</div>
                <div class="code-name">#icon-homepage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-integral"></use>
                </svg>
                <div class="name">integral</div>
                <div class="code-name">#icon-integral</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-interactive"></use>
                </svg>
                <div class="name">interactive</div>
                <div class="code-name">#icon-interactive</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-label"></use>
                </svg>
                <div class="name">label</div>
                <div class="code-name">#icon-label</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-like_fill"></use>
                </svg>
                <div class="name">like_fill</div>
                <div class="code-name">#icon-like_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-live"></use>
                </svg>
                <div class="name">live</div>
                <div class="code-name">#icon-live</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock_fill"></use>
                </svg>
                <div class="name">lock_fill</div>
                <div class="code-name">#icon-lock_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-manage"></use>
                </svg>
                <div class="name">manage</div>
                <div class="code-name">#icon-manage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobilephone"></use>
                </svg>
                <div class="name">mobilephone</div>
                <div class="code-name">#icon-mobilephone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-narrow"></use>
                </svg>
                <div class="name">narrow</div>
                <div class="code-name">#icon-narrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-offline"></use>
                </svg>
                <div class="name">offline</div>
                <div class="code-name">#icon-offline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-other"></use>
                </svg>
                <div class="name">other</div>
                <div class="code-name">#icon-other</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-people"></use>
                </svg>
                <div class="name">people</div>
                <div class="code-name">#icon-people</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-playon"></use>
                </svg>
                <div class="name">playon</div>
                <div class="code-name">#icon-playon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-praise"></use>
                </svg>
                <div class="name">praise</div>
                <div class="code-name">#icon-praise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-prompt"></use>
                </svg>
                <div class="name">prompt</div>
                <div class="code-name">#icon-prompt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remind"></use>
                </svg>
                <div class="name">remind</div>
                <div class="code-name">#icon-remind</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-return"></use>
                </svg>
                <div class="name">return</div>
                <div class="code-name">#icon-return</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#icon-send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-service"></use>
                </svg>
                <div class="name">service</div>
                <div class="code-name">#icon-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setup"></use>
                </svg>
                <div class="name">setup</div>
                <div class="code-name">#icon-setup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#icon-success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-switch"></use>
                </svg>
                <div class="name">switch</div>
                <div class="code-name">#icon-switch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tailor"></use>
                </svg>
                <div class="name">tailor</div>
                <div class="code-name">#icon-tailor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-task"></use>
                </svg>
                <div class="name">task</div>
                <div class="code-name">#icon-task</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasklist"></use>
                </svg>
                <div class="name">tasklist</div>
                <div class="code-name">#icon-tasklist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#icon-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trash"></use>
                </svg>
                <div class="name">trash</div>
                <div class="code-name">#icon-trash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-undo"></use>
                </svg>
                <div class="name">undo</div>
                <div class="code-name">#icon-undo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock_fill"></use>
                </svg>
                <div class="name">unlock_fill</div>
                <div class="code-name">#icon-unlock_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-packup"></use>
                </svg>
                <div class="name">packup</div>
                <div class="code-name">#icon-packup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unfold"></use>
                </svg>
                <div class="name">unfold</div>
                <div class="code-name">#icon-unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-wenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-JPG"></use>
                </svg>
                <div class="name">JPG</div>
                <div class="code-name">#icon-JPG</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DOCX"></use>
                </svg>
                <div class="name">DOCX</div>
                <div class="code-name">#icon-DOCX</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-MP4"></use>
                </svg>
                <div class="name">MP4</div>
                <div class="code-name">#icon-MP4</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
